<template>
	<view class="container">
		<image  style="height: 100%;width: 100%;position: absolute;" :src="bg_img"></image>
		<view>
			<diy-nav :title="null" :bgColor2="statusBgColor" :is_relative="true"></diy-nav>
		</view>
		<view style="margin: 60rpx">
			<!-- <image mode="aspectFill" style="width: 100%;height: 308rpx" src="/static/temp/login_str.png"></image> -->
			<image mode="aspectFill" style="width: 100%;height: 308rpx;position: relative;" :src="tip_img"></image>
		</view>
		
		<!-- <button class="confirm-btn" v-if="first_check&&second_check" open-type="getPhoneNumber" @getphonenumber="decryptPhoneNumber">手机号快捷登录</button> -->
		<button class="confirm-btn" v-if="first_check" open-type="getPhoneNumber" @getphonenumber="decryptPhoneNumber">手机号快捷登录</button>
		<button class="confirm-btn" v-else  @click="decryptPhoneNumber">手机号快捷登录</button>
		<!-- <button class="confirm-btn" style="background: transparent;border: 1px solid #FFFFFF;margin-top: 50rpx;" @click="toIndex">游客身份浏览</button> -->
		
		<view class="tips">
			<view class="tip_policy">
				<!-- <radio color='#90bbda' style="transform:scale(0.7)"  :checked="is_checked"></radio> -->
				<checkbox @click="setCheck('u')" value="1" :checked="first_check" color="#0191FF" style="transform:scale(0.7)" />
				<!-- <view class="policy_content">已阅读并同意<text class="color-b" @click="navTo('privacy')">《用户协议》</text>、<text class="color-b" @click="navTo('policy')">《隐私政策》</text>，未注册的手机号将自动创建本小程序账号
				</view> -->
				<view class="policy_content">已阅读并同意<text class="color-b" @click="navTo('privacy')">《用户须知》</text>未注册的手机号将自动创建本小程序账号
				</view>
			</view>
			<!-- <view class="tip_policy"> -->
				<!-- <radio color='#90bbda' style="transform:scale(0.7)"  :checked="is_checked"></radio> -->
				<!-- <checkbox @click="setCheck('y')" value="2" :checked="second_check" color="#0191FF" style="transform:scale(0.7)" /> -->
				<!-- <view class="policy_content">已阅读并同意<text class="color-b" @click="navTo('ideology')">《意识形态工作责任书》</text></view> -->
			<!-- </view> -->
		</view>
	</view>
</template>

<script>
	import {mapMutations} from 'vuex';
	import DiyNav from "@/components/diy-nav-back";
	import Api from '@/common/api';
	export default{
		components: {
			DiyNav
		},
		data(){
			return {
				statusBgColor:'transparent',
				code:'',
				bg_img:'',
				tip_img:'',
				is_checked:true,
				first_check:false,
				second_check:false
				
			}
		},
		onLoad(){
			this.loadPlatformResource();
		},
		methods: {
			...mapMutations(['login']),
			async loadPlatformResource(){
				let data = await Api.apiCall('get',Api.apiName.platform_resource);
				if(!data){
					return;
				}
				this.bg_img=data.data.basic.login_bg;
				this.tip_img=data.data.basic.login_tip;
			},
			navTo(t){
				uni.navigateTo({
					url:'/pages/public/policy?t='+t
				})
			},
			toIndex(){
				uni.reLaunch({
					url:'/pages/campus/index'
				})
			},
			//授权手机号
			async decryptPhoneNumber(e) {
			    // if(!this.first_check||!this.second_check){
			    // 	this.$api.msg(`请同意用户协议`)
			    // 	return false;
			    // }
				if(!this.first_check){
					this.$api.msg(`请同意用户须知`)
					return false;
				}
				if(e.detail.errMsg!='getPhoneNumber:ok'){
					this.$api.msg('获取用户手机失败');
					return false;
				}
				let that =this;
				uni.login({
				  provider: 'weixin', //使用微信登录
				  success:async function (loginRes) {	
					  that.code= loginRes.code;
					  console.log(that.code);
					  let params = {'code':that.code,'iv':e.detail.iv,'encData':e.detail.encryptedData};
					  let data = await Api.apiCall('post',Api.apiName.wx_auto_reg,params);
					  if(data.data){
					  	that.login(data.data);
					  	
					  	uni.navigateTo({
					  		url: `/pages/public/role`
					  	})
					  }
				  }
				});
				
			  },
			  setCheck(t){
				  if(t=='u'){
					  this.first_check=!this.first_check;
				  }
				  if(t=='y'){
					  this.second_check=!this.second_check;
				  }
			  },
		},

	}
</script>

<style lang='scss'>
	page{
		/* background-image: url("https://photo.16pic.com/00/47/86/16pic_4786353_b.jpg");
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center center; */
	}
	.container{
	
	}

	.confirm-btn{
		
		width: 630upx;
		height: 76upx;
		line-height: 76upx;
		border-radius: 10rpx;
		margin-top: 440upx;
		background: #0191FF;
		color: #fff;
		font-size: $font-lg;
		
	}
	.tips{
		margin-top: 120rpx;
		margin: 80rpx;
	}
	
	.tip_title{
		color:#333333;
		font-size: 26rpx;
		padding: 12rpx;
	}
	
	.tip_policy{
		display: flex;
		align-items: flex-start;
		margin-top: 20rpx;
	}
	.policy_content{
		font-size: 13px;
		padding: 6rpx 0rpx;
		color: #fff;
		position: relative;
	}
	.color-b{
		color: #0191FF;
	}
	.radio-w{
		width: 35rpx;
		height: 35rpx;
		border: 1px solid #FFFFFF;
		border-radius: 50%;
	}
	.radio-n{
		background: #FFFFFF;
		height: 10rpx;
		width: 10rpx;
		border-radius: 50%;
		position: absolute;
		top: 12rpx;
		left: 12rpx;
	}
</style>
